<template>
  <div class="quick-consult-panel">
    <div class="consult-header">
      <h2>快速咨询</h2>
      <el-button
          type="primary"
          size="small"
          @click="handleNewConsult"
      >
        <el-icon><Plus /></el-icon>
        新建咨询
      </el-button>
    </div>

    <div class="consult-content">
      <!-- 医生列表 -->
      <div class="doctor-list">
        <h3>选择医生</h3>
        <el-scrollbar>
          <div class="doctors">
            <div
                v-for="doctor in doctors"
                :key="doctor.id"
                class="doctor-card"
                :class="{ active: selectedDoctor?.id === doctor.id }"
                @click="selectDoctor(doctor)"
            >
              <el-avatar :size="50" :src="doctor.avatar" />
              <div class="doctor-info">
                <h4>{{ doctor.name }}</h4>
                <p>{{ doctor.department }}</p>
                <el-tag size="small" :type="doctor.online ? 'success' : 'info'">
                  {{ doctor.online ? '在线' : '离线' }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>

      <!-- 咨询表单 -->
      <div class="consult-form">
        <el-form
            ref="formRef"
            :model="form"
            label-width="80px"
            :rules="rules"
        >
          <el-form-item label="咨询类型" prop="type">
            <el-select
                v-model="form.type"
                placeholder="请选择咨询类型"
                clearable
            >
              <el-option
                  v-for="item in consultTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="咨询内容" prop="content">
            <el-input
                v-model="form.content"
                type="textarea"
                :rows="5"
                placeholder="请详细描述您的症状或问题"
                maxlength="500"
                show-word-limit
            />
          </el-form-item>

          <el-form-item label="上传图片">
            <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :limit="3"
                :on-change="handleUploadChange"
                :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>

          <el-form-item>
            <el-button
                type="primary"
                :loading="submitting"
                @click="submitConsult"
            >
              提交咨询
            </el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 医生数据
const doctors = ref([
  {
    id: 1,
    name: '王医生',
    department: '内科',
    avatar: 'https://via.placeholder.com/50',
    online: true
  },
  {
    id: 2,
    name: '李医生',
    department: '外科',
    avatar: 'https://via.placeholder.com/50',
    online: true
  },
  {
    id: 3,
    name: '张医生',
    department: '儿科',
    avatar: 'https://via.placeholder.com/50',
    online: false
  }
])

// 选中的医生
const selectedDoctor = ref(null)

// 咨询类型选项
const consultTypes = ref([
  { value: 'symptom', label: '症状咨询' },
  { value: 'medication', label: '用药咨询' },
  { value: 'report', label: '报告解读' },
  { value: 'other', label: '其他问题' }
])

// 表单数据
const form = reactive({
  type: '',
  content: '',
  images: []
})

// 表单验证规则
const rules = reactive({
  type: [
    { required: true, message: '请选择咨询类型', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入咨询内容', trigger: 'blur' },
    { min: 10, message: '内容不能少于10个字符', trigger: 'blur' }
  ]
})

// 表单引用
const formRef = ref(null)

// 提交状态
const submitting = ref(false)

// 选择医生
const selectDoctor = (doctor) => {
  selectedDoctor.value = doctor
}

// 处理文件上传
const handleUploadChange = (file) => {
  form.images.push(file)
}

// 处理文件移除
const handleRemove = (file) => {
  const index = form.images.findIndex(f => f.uid === file.uid)
  if (index !== -1) {
    form.images.splice(index, 1)
  }
}

// 提交咨询
const submitConsult = async () => {
  if (!selectedDoctor.value) {
    ElMessage.warning('请选择咨询医生')
    return
  }

  try {
    await formRef.value.validate()
    submitting.value = true

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    ElMessage.success('咨询提交成功')
    resetForm()
  } catch (error) {
    console.error('提交失败:', error)
  } finally {
    submitting.value = false
  }
}

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
  form.images = []
}

// 新建咨询
const handleNewConsult = () => {
  selectedDoctor.value = null
  resetForm()
}
</script>

<style scoped>
.quick-consult-panel {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.consult-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.consult-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.consult-content {
  display: flex;
  flex: 1;
  gap: 20px;
}

.doctor-list {
  width: 250px;
  border-right: 1px solid #eee;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
}

.doctor-list h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #666;
}

.doctors {
  flex: 1;
  overflow-y: auto;
}

.doctor-card {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #eee;
}

.doctor-card:hover {
  background-color: #f5f7fa;
}

.doctor-card.active {
  border-color: var(--el-color-primary);
  background-color: #f0f7ff;
}

.doctor-info {
  margin-left: 12px;
}

.doctor-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
}

.doctor-info p {
  margin: 0 0 4px 0;
  font-size: 12px;
  color: #999;
}

.consult-form {
  flex: 1;
  padding: 0 20px;
}

:deep(.el-upload--picture-card) {
  width: 100px;
  height: 100px;
  line-height: 110px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 100px;
  height: 100px;
}
</style>
